import React from "react";
import { connect } from "react-redux";
import './index.scss';

let win;
if(window.require){
    const { remote } = window.require("electron");
    win = remote.getGlobal("lyricsWindow");
}



const mapStateToProps = (state) => {
    return {
        state,
    };
}

class LyricsPage extends React.Component{
    constructor(props) {
        super(props);
        this.state = {
            Audiolyrics: this.props.state.Audiolyrics,
        };
    }

    componentDidMount() {
        const { ipcRenderer } = window.require("electron");
        ipcRenderer.on('upgradelyrics',(e,data)=> {
            const { Audiolyrics } = this.state;
            if(data !== Audiolyrics){
                this.setState({
                    Audiolyrics: data,
                })
            }
        })

        const desktop = document.querySelector("#desktop");
        let biasX = 0;
        let biasY = 0;
        let { width, height } = win.getBounds();
        const moveEvent = (e) => {
            win.setBounds({
                x: e.screenX - biasX,
                y: e.screenY - biasY,
                width,
                height,
            });
        };
        desktop.addEventListener("mousedown", function (e) {
            width = win.getBounds().width;
            height = win.getBounds().height;
            switch (e.button) {
                case 0:
                    biasX = e.x;
                    biasY = e.y;
                    desktop.addEventListener("mousemove", moveEvent);
                    break;
                case 2:
                    break;
            }
        });
        desktop.addEventListener("mouseup", (e) => {
            biasX = 0;
            biasY = 0;
            desktop.removeEventListener("mousemove", moveEvent);
        });
        desktop.addEventListener("mouseleave", (e) => {
            biasX = 0;
            biasY = 0;
            desktop.removeEventListener("mousemove", moveEvent);
        });
    }

    render() {

        return(
            <div className="lyricsPage" id="desktop">
                {/*歌词页*/}
                {/*菜单栏*/}
                <div className="lyrics_Menu">
                    这是菜单栏
                </div>
                {/*歌词*/}
                <div className="lyrics_content">
                    <span className="lyrics_text">{this.state.Audiolyrics}</span>
                </div>

            </div>
        )
    }
}

export default connect(mapStateToProps)(LyricsPage);